<template>
	<i-drawer v-model="showOnline" :confirm_title=" online ? '确认下线' : '确认上线' " @confirm="confirm"></i-drawer>
	<i-popup :confirmData="{title: '我知道了'}" :closeData="{show: false}" v-if="modal" @confirm="modal = false">
		<view class="pop_border">
			<text class="title">需上架商品</text>
			<view>亲爱的老板，请先至少上架一款商品，才可以上线营业哟~</view>
		</view>
	</i-popup>
	<!-- #ifdef MP-WEIXIN -->
	<i-popup :body="true" :bottom="false" bgColor="rgba(0,0,0,0)" :mask="true" v-if="erCodeShow"
		@close="erCodeShow = false">
		<view class="share_image">
			<image :src="images" mode="" @longpress="longpress"></image>
			<text>长按二维码保存到相册</text>
		</view>
	</i-popup>
	<!-- #endif -->
	<i-picker :value="valueData" @confirm="pickerChange" :list="dateList" v-model="showPicker"></i-picker>
	<view class="store_manager">
		<view class="list">
			<i-lineRow padding="32rpx 0" title="门店LOGO" :diyRight="true">
				<template #right>
					<view class="image">
						<image :src="storeData.doorPhotoUrl"></image>
					</view>
				</template>
			</i-lineRow>
			<i-lineRow padding="32rpx 0" title="名称" :diyRight="true">
				<template #right>
					{{storeData.storeName}}
				</template>
			</i-lineRow>
			<i-lineRow padding="32rpx 0" title="门店状态" :diyRight="true">
				<template #right>
					{{online ? '已上线' : '已下线' }}
				</template>
			</i-lineRow>
			<i-lineRow padding="32rpx 0" title="24小时营业" :diyRight="true">
				<template #right>
					<switch :checked="storeData.open24Hours" @change="chekChange" color="#FB652E"
						style="transform:scale(0.9)" />
				</template>
			</i-lineRow>
			<i-lineRow padding="32rpx 0" title="营业时间" :diyRight="true" @click="showPicker = true">
				<template #right>
					<view class="lines">
						<view class="uni-input">{{storeData.openTimeStart}}</view> -- <view class="uni-input">
							{{storeData.openTimeEnd}}
						</view>
						<view class="goto" style="margin-left: 8rpx;">
							<image src="../../static/images/goto_icon.png" mode=""></image>
						</view>
					</view>
				</template>
			</i-lineRow>
			<!-- #ifdef MP-WEIXIN -->
			<i-lineRow padding="32rpx 0" title="我的二维码" @click="erCodeShow = true"></i-lineRow>
			<!-- #endif -->
			<view style="height: 64rpx;"></view>
			<i-buttons size="32" :color="online? '#FB652E': '#fff'" :bgColor="online? '#F3F4F5' :'#34C759'"
				padding="18rpx 0" radius="4" @click="showOnline = true">{{online ? '下线休息':'上线营业'}}</i-buttons>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		navTo,
		showTost
	} from '../../utils/common'
	import {
		getStoreManageIndex,
		editStoreManage
	} from '../../api/store'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref,
		computed
	} from 'vue';
	import useStore from '../../stores/index'
	import {
		getMinProgramCode
	} from '../../api/index'

	const store = useStore()
	const erCodeShow = ref(false)
	const images = ref('')
	const showOnline = ref(false)
	const online = ref(false)
	const modal = ref(false)
	const storeData = ref<any>({})
	const showPicker = ref(false)

	const valueData = ref<any>([{
		label: '00',
		value: 0
	},
	{
		label: '00',
		value: 0
	},
	{
		label: '00',
		value: 0
	},
	{
		label: '00',
		value: 0
	},
	])
	const dateList = reactive<any[]>([
		[],
		[],
		[],
		[]
	])

	for (var i = 0; i < 60; i++) {
		if (i < 24) {
			dateList[0].push({
				label: i < 10 ? ('0' + i) : ('' + i),
				value: i
			})
			dateList[2].push({
				label: i < 10 ? ('0' + i) : ('' + i),
				value: i
			})
		}
		dateList[1].push({
			label: i < 10 ? ('0' + i) : ('' + i),
			value: i
		})
		dateList[3].push({
			label: i < 10 ? ('0' + i) : ('' + i),
			value: i
		})
	}

	const userInfo = computed(() => {
		return store.userInfo
	})

	const confirm = () => {
		if (!storeData.value.hasGoods) {
			modal.value = true
			return
		}
		online.value = !online.value
		storeData.value.status = online.value ? '0' : '1'
		saveStore()
	}
	// const gotoPage = () => {
	// 	modal.value = false
	// 	navTo('/pages/views/shop_manager', 'navigateTo')
	// }

	const pickerChange = async (e : any) => {
		storeData.value.openTimeStart = `${e[0].label}:${e[1].label}`
		storeData.value.openTimeEnd = `${e[2].label}:${e[3].label}`
		if (storeData.value.openTimeStart === '00:00' && storeData.value.openTimeEnd === '23:59') {
			storeData.value.open24Hours = true
		} else {
			storeData.value.open24Hours = false
		}
		valueData.value = e
		saveStore()
	}

	const chekChange = (e : {
		detail : {
			value : boolean
		}
	}) => {
		if (e.detail.value) {
			storeData.value.openTimeStart = '00:00'
			storeData.value.openTimeEnd = '23:59'
			valueData.value = [{
				value: 0,
				label: '00',
			}, {
				label: '00',
				value: 0
			}, {
				label: '23',
				value: 23
			}, {
				label: '59',
				value: 59
			}]
		}
		storeData.value.open24Hours = e.detail.value
		saveStore()
	}
	const saveStore = async () => {
		await editStoreManage({
			"businessTypeList": storeData.value.businessTypeList,
			"open24Hours": storeData.value.open24Hours,
			"openTimeEnd": storeData.value.openTimeEnd,
			"openTimeStart": storeData.value.openTimeStart,
			"status": storeData.value.status,
			"storeId": storeData.value.storeId,
		})
		store.setStoreInfo()
		showTost('修改成功！')
	}
	const getStoreInfo = async () => {
		const {
			data
		} = await getStoreManageIndex()
		storeData.value = data
		online.value = data.status === '0'
		const timer = data.openTimeStart.split(':').concat(data.openTimeEnd.split(':'))
		timer.map((item : string, i : number) => {
			valueData.value[i] = {
				label: item,
				value: Number(item)
			}
		})
	}
	const longpress = () => {
		// #ifdef MP-WEIXIN
		wx.downloadFile({
			url: images.value,
			success: (res) => {
				var filePath = res.tempFilePath
				wx.saveImageToPhotosAlbum({
					filePath: filePath,
				}).then(res => {
					showTost('保存到相册成功')
					erCodeShow.value = false
				}).catch(e => {
					showTost('保存失败')
				})
			}
		})
		// #endif
	}
	const getCode = () => {
		images.value = getMinProgramCode(userInfo.value.invitation)
	}

	// #ifdef MP-WEIXIN
	getCode()
	// #endif
	onShow(() => {
		getStoreInfo()
	})
</script>

<style lang="scss" scoped>
	.store_manager {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		@include dfont(28rpx);

		.image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 80rpx;
			background-color: #eaeaea;

			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 80rpx;
			}
		}

		.list {
			width: calc(100% - 48rpx);
			margin: 0 auto;
			margin-top: 24rpx;
		}

		.lines {
			@include flexR;

			text {
				margin-right: 20rpx;
			}
		}

	}

	.pop_border {
		@include flexCC;
		padding: 48rpx 0;
		@include dfont;
		text-align: center;

		.title {
			@include titlefont;
			margin-bottom: 32rpx;
		}

	}

	.showPicker {
		width: 300rpx;
		display: flex;
	}

	.share_image {

		// background-color: #fff;
		width: 100%;
		@include flexCC;

		image {
			width: 300rpx;
			height: 300rpx;
			border-radius: 50%;
		}

		text {
			@include dfont(26rpx);
			margin-top: 24rpx;
			color: #fff
		}
	}
</style>